<template>
    <div>
        <a-menu class="home-menu" mode="horizontal" :default-open-keys="defaultOpenKeys" :openKeys="defaultOpenKeys"
            :defaultSelectedKeys="['Home']" :selected-keys="selectedKeys" breakpoint="sm" :collapsed="collapsed"
            @collapse="onCollapse" @menuItemClick="onClickMenuItem">
            <template v-for="(menu, index) in menus" :key="index">
                <a-menu-item v-if="!menu.children" :key="menu.path">
                    <template #icon>
                        <component v-if="menu?.meta?.icon" :is="menu?.meta?.icon" />
                        <icon-font v-if="menu?.meta?.iconFont" :type="menu?.meta?.iconFont" />
                    </template>
                    {{ menu?.meta?.title }}
                </a-menu-item>
                <a-sub-menu v-if="menu?.children" :key="menu.path" :title="menu?.meta?.title">
                    <template #icon>
                        <component v-if="menu?.meta?.icon" :is="menu?.meta?.icon" />
                        <icon-font v-if="menu?.meta?.iconFont" :type="menu?.meta?.iconFont" />
                    </template>
                    <a-menu-item v-for="(subMenu) in menu?.children" :key="subMenu.path" :title="subMenu?.meta?.title">
                        <template #icon>
                            <component v-if="subMenu?.meta?.icon" :is="subMenu.meta.icon" />
                            <icon-font v-if="subMenu?.meta?.iconFont" :type="subMenu.meta.iconFont" />
                        </template>
                        {{ subMenu?.meta?.title }}
                    </a-menu-item>
                </a-sub-menu>
            </template>
        </a-menu>
    </div>
</template>
<script lang="ts" setup>
import IconFont from '@/composables/IconFont';

const props = defineProps({
    menus: {
        type: Array,
        default: () => [],
    } as any
})
const { menus } = props

const { defaultOpenKeys, selectedKeys, onClickMenuItem } = useRouteMenu(menus)

const collapsed = ref(false)
const onCollapse = () => {
    // Message.info('收起菜单')
    collapsed.value = !collapsed.value
}
</script>
<style scoped lang="scss"></style>